<template>
  <div class="returnsDetails-container">
    <div class="details-container">
      <div class="out-border card-body">
        <div>退货商品</div>
        <el-table :data="productInfo" border>
          <el-table-column label="商品图片" align="center">
            <template v-slot="scope">
              <img :src="scope.row.productPic" alt="" width="80" />
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center">
            <template v-slot="scope">
              <div>价格{{ scope.row.productName }}</div>
              <div>品牌: {{ scope.row.productBrand }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="" label="价格/货号" align="center">
            <template v-slot="scope">
              <div>{{ scope.row.returnAmount }}</div>
              <div>货号: No.26</div>
            </template>
          </el-table-column>
          <el-table-column prop="productAttr" label="属性" align="center"></el-table-column>
          <el-table-column prop="productCount" label="数量" align="center"></el-table-column>
          <el-table-column label="小计" align="center">
            <template v-slot="scope">
              <div>￥{{ scope.row.returnAmount }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="serveInfo card-body out-border layout-top">
        <div>服务单信息</div>
        <serverList :serverData="server_info" />
        <div class="layout-top out-border">
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple serve-item">{{ '订单金额' }}</div></el-col
            >
            <el-col :span="18"
              ><div class="grid-content bg-purple">￥{{ this.server_info.infoData.productRealPrice }}</div></el-col
            >
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple serve-item">{{ '确认退款金额' }}</div></el-col
            >
            <el-col :span="18"
              ><div class="grid-content bg-purple">
                <span>￥<el-input placeholder="请输入内容" v-model="input" clearable> </el-input></span></div
            ></el-col> </el-row
          ><el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple serve-item">{{ '选择收货点 ' }}</div></el-col
            >
            <el-col :span="18"
              ><div class="grid-content bg-purple">
                <el-select v-model="value" placeholder="请选择">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                </el-select></div
            ></el-col> </el-row
          ><el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple serve-item">{{ '收货人姓名' }}</div></el-col
            >
            <el-col :span="18"
              ><div class="grid-content bg-purple">{{ this.server_info.infoData.returnName }}</div></el-col
            > </el-row
          ><el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple serve-item">{{ '所在区域' }}</div></el-col
            >
            <el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple serve-item">{{ '详细地址' }}</div></el-col
            >
            <el-col :span="18"><div class="grid-content bg-purple"></div></el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple serve-item">{{ '联系电话' }}</div></el-col
            >
            <el-col :span="18"
              ><div class="grid-content bg-purple">{{ this.server_info.infoData.returnPhone }}</div></el-col
            >
          </el-row>
        </div>
        <div class="layout-top out-border">
          <el-row :gutter="20">
            <el-col :span="6"
              ><div class="grid-content bg-purple serve-item">{{ '处理备注' }}</div></el-col
            >
            <el-col :span="18"
              ><div class="grid-content bg-purple"><el-input /></div
            ></el-col>
          </el-row>
        </div>
        <div class="d-flex justify-content-center mt-4">
          <el-button size="mini" type="primary">确认退货</el-button>
          <el-button size="mini" type="danger">拒绝退货</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import serverList from '@/components/common/info_table_tempalte/index.vue'
import { fetchDetailsData } from '@/api/api'
export default {
  name: 'ReturnsDetails',
  data() {
    return {
      productInfo: [],
      server_info: {
        attr: [
          {
            label_name: '服务单号',
            value: 'id',
          },
          {
            label_name: '申请状态',
            value: 'status',
          },
          {
            label_name: '订单编号',
            value: 'orderSn',
          },
          {
            label_name: '申请时间',
            value: 'createTime',
          },
          {
            label_name: '用户账号',
            value: 'memberUsername',
          },
          {
            label_name: '联系人',
            value: 'returnName',
          },
          {
            label_name: '联系电话',
            value: 'returnPhone',
          },
          {
            label_name: '退货原因',
            value: 'reason',
          },
          {
            label_name: '问题描述',
            value: 'description',
          },
          {
            label_name: '凭证图片',
            value: ['productPic', 'proofPics'],
            type: 'images',
          },
        ],
        infoData: {},
      },
    }
  },
  methods: {
    async getProductInfo() {
      let r_id = this.$route.query.id
      let res = await fetchDetailsData(r_id)
      this.productInfo.push(res.data)
      this.server_info.infoData = res.data
      console.log(res.data)
    },
  },
  components: { serverList },
  created() {
    this.getProductInfo()
  },
}
</script>
<style lang="scss" scoped>
.serve-item {
  font-size: 14px;
  background: #f2f6fc;
  padding: 10px;
}
</style>
